<template>
  <div class="goodsListDetail">
  <view v-if="listDetail.status ==1" class="background_color_marf">
    <view  class="flex_Text">
      <uv-icon  name="clock" color="white" size="33rpx"></uv-icon>

        &nbsp;等待付款</view>

        <view class="sy">剩余时间：<uv-count-down :customStyle="{color:'white'}" :time=" 20 * 60 * 1000" format="mm:ss"></uv-count-down></view>
  </view>


  <view v-if="listDetail.status ==2"  class="background_color_marf">
    <view  class="flex_Text">
      <uv-icon  name="clock" color="white" size="33rpx"></uv-icon>

        &nbsp;等待发货</view>

        <view class="sy">已付款，等待商家发货</view>
  </view>

  <view v-if="listDetail.status ==3"  class="background_color_marf">
    <view  class="flex_Text">
      <uv-icon  name="car" color="white" size="33rpx"></uv-icon>

        &nbsp;等待收货</view>

        <view class="sy">商家已发货，请耐心等待</view>
  </view>


  <view  v-if="listDetail.status ==5" class="background_color_marf">
    <view  class="flex_Text">
      <uv-icon  name="checkbox-mark" color="white" size="33rpx"></uv-icon>

        &nbsp;完成</view>

        <view class="sy">订单已完成，感谢您的购买</view>
  </view>

  <view  v-if="listDetail.status ==6" class="background_color_marf">
    <view  class="flex_Text">
      <uv-icon  name="checkbox-mark" color="white" size="33rpx"></uv-icon>

        &nbsp;退款成功</view>

        <view class="sy">订单退款成功</view>
  </view>

  <view class="message_content_s">
    <view >
    <view class=" content_shop_car">
      <view style="position: relative;" v-if="listDetail.status ==5" class="SH">
        <view> 申请售后，联系客服</view>
        <button style="position: absolute;    z-index: 999;
    opacity: 0;" open-type="contact">123</button>
      </view>

      <div class="header_title">
  
  <view class="view_image">  
  <uv-image :lazy-load="true" src="/static/fz.png" width="24rpx" height="24rpx"></uv-image>
 </view>
 &nbsp;
 <view style="font-size: 24rpx;"  class="text_s">{{listDetail.shopName}}</view>
 
 </div>

   <view  class="list_shop ">
      

<view class="iamge_s">
  <uv-image mode="heightFix" :lazy-load="true" :src="listDetail.imgUrl"   height="144rpx"></uv-image>
</view>

<view   class="content_box">
<view class="font_shop">{{ listDetail.goodsTitle }} </view>

<view class="tag_shop">{{ listDetail.goodsSpecification || '无规格' }}<span style="font-size: 20rpx;color: #818181;">× {{ listDetail.totalNum }}</span></view>

<view class="price_box_shope">

  <view class="price">￥{{ listDetail.goodsPrice }}</view>
  
</view>
</view>



</view>
<view class="bottom_border"></view>

    </view>

    
    
  </view>

  <view class="message_table_top">
    <view class="table_item">
      <view class="title">商品总价 </view>
     <view class="values big">¥ {{listDetail.goodsPrice }}</view>
    </view>

    <view class="table_item">
      <view class="title">运费  </view>
     <view class="values">¥{{ listDetail.shippingPrice }}.00</view>
    </view>

    <view class="table_item">
      <view class="title">实付款   </view>
     <view class="values big">¥ {{  listDetail.actuallyPrice }}</view>
    </view>


  </view>

  <view class="bottom_border"></view>
  <view style="margin-bottom: 40rpx;"></view>
  <view class="message_table_top">
    <view class="table_item flex_top">
      <view class="title">收货信息 </view>
     <view class="values modify">{{ listDetail.adress }}
     </view>
    </view>

    <view class="table_item flex_top">
      <view class="title">订单编号 </view>
     <view class="values modify">{{ listDetail.orderNumber }}
     </view>
    </view>

    <view class="table_item flex_top">
      <view class="title">创建时间： </view>
     <view class="values modify"> {{ listDetail.createTime }}
     </view>
    </view>

    <view class="table_item flex_top">
      <view class="title">付款时间： </view>
     <view class="values modify">{{ listDetail.payTime }}
     </view>
    </view>

    <view class="table_item flex_top">
      <view class="title">发货时间： </view>
     <view class="values modify">{{ listDetail.deliveryTime }}
     </view>
    </view>

    <view class="table_item flex_top">
      <view class="title">成交时间： </view>
     <view class="values modify">{{ listDetail.finishTime }}
     </view>
    </view>


  </view>
  </view>
  </div>

  <view v-if="listDetail.status ==1"  class="bottom_buttom">

    <view class="bottom_content_s">
<view class="view_flex">
 

 <view  class="text_s"></view>
 
</view>

<view  class="right_button">
  <uv-button v-if='false' :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}" size="small" type="info" :plain="true" text="联系客服"></uv-button>
  &nbsp;
  <uv-button @click="gotoPay" :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}"  size="small" type="error" :plain="true" text="立即支付"></uv-button>
</view>






</view>

  </view>


  <view v-if="listDetail.status ==2"  class="bottom_buttom">

<view class="bottom_content_s">
<view class="view_flex">


<view  class="text_s"></view>

</view>

<view  class="right_button">
  <button style="position: absolute;    z-index: 999;
    opacity: 0;" open-type="contact">123</button>
<uv-button :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}" size="small" type="info" :plain="true" text="联系客服"></uv-button>
&nbsp;
<uv-button v-if="false" :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}"  size="small" type="error" :plain="true" text="提醒发货"></uv-button>
</view>






</view>

</view>

<view  v-if="listDetail.status ==3" class="bottom_buttom">

<view class="bottom_content_s">
<view class="view_flex">


<view  class="text_s"></view>

</view>

<view  class="right_button">
<uv-button @click="checkWL" :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}" size="small" type="error" :plain="true" text="查看物流"></uv-button>
&nbsp;
<uv-button v-if='false' @click="sumbit" :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}"  size="small" type="error" :plain="true" text="确认收货"></uv-button>
</view>






</view>

</view>


<view  v-if="listDetail.status ==5" class="bottom_buttom">

<view class="bottom_content_s">
<view class="view_flex">


<view  class="text_s"></view>

</view>

<view  class="right_button">
<!-- <uv-button :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}" size="small" type="info" :plain="true" text="取消订单"></uv-button> -->
&nbsp;
<uv-button @click="gotoDetail" :customTextStyle="{fontSize:'22rpx'}" shape="circle" :customStyle="{height:'45rpx',}"  size="small" type="error" :plain="true" text="再次购买"></uv-button>
</view>






</view>

</view>



<uv-popup ref="popup" mode="bottom" >
			<view style="width: 100%;padding: 
      20rpx;">
				<view style="margin-top: 20rpx;font-size: 
        
        25rpx;">抱歉，目前暂时无法查看物流信息，请复制运单号自行查询</view>
				<view style="margin-top: 20rpx;font-size: 
        
        25rpx;">物流公司：{{ checkData.companyName }}</view>
        <view  style="margin-top: 20rpx;font-size: 
        
        25rpx;">运单号：{{ checkData.dvyFlowId }}</view>
			</view>
		</uv-popup>

</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import {orderDetail,check} from '../https/api/myBuyList'



let gotoDetail = async() => {
 let id = listDetail.value.orderItemDtos[0].prodId
 uni.setStorageSync('goodsDetailData', JSON.stringify({prodId:id}))
 uni.navigateTo({
    url: '/pages/goodsDetail',
  });
}

let popup = ref('')
let listDetail = ref({})
let orderNumberS = ref('')
onShow(()=>{
  let data = JSON.parse(uni.getStorageSync('listDetailObj'))
  orderNumberS.value = data.orderNumber
  getorderDetail({orderNumber:data.orderNumber})
})


let gotoPay = () => {
  let data =uni.getStorageSync('orderNumbers')
  doPay(data)

}

let doPay =(orderNumbers) =>{

  
uni.showLoading({
  title: "请稍候",
  mask: true
});

uni.request({
  url: 'https://www.gjlfb.cn/mallApi/' + 'p/order/pay',
  method: "POST",
  header: {
    "X-Auth-Token": uni.getStorageSync('openId'),
    'Authorization': uni.getStorageSync('Token'),
    'content-type': 'application/json',
  },
  data: {
    orderNumbers: orderNumbers,
    payType: 1
  },
  success: (res) => {
    uni.hideLoading();
    console.log(JSON.stringify(res.data));
    if (res.data.code == "00000") {

      uni.requestPayment({
        provider: "wxpay",
        orderInfo: "",
        timeStamp: res.data.data.timeStamp,
        nonceStr: res.data.data.nonceStr,
        package: res.data.data.package,
        signType: res.data.data.signType,
        paySign: res.data.data.sign,
        success: (res) => {
          console.log('success:' + JSON.stringify(res));
          //支付成功
            uni.navigateTo({
url:'/pages/pay'
})
        },
        fail: (err) => {
          console.log('fail:' + JSON.stringify(err));
          uni.showToast({
            title: "支付取消",
            icon: "none"
          });
        }
      })

    } else {
      uni.showToast({
        title: res.data.extMessage,
        icon: "none"
      });
    }
  },
  fail: () => {
    uni.hideLoading();
  }
})
}



let navText = ref('')
let getorderDetail = async(data) => {
  let {data:datas} = await orderDetail(data)  
  listDetail.value = {
            ...datas,
            goodsTitle:datas.orderItemDtos[0].prodName,
            goodsSpecification:datas.orderItemDtos[0].skuName,
            goodsPrice:datas.actualTotal,
            actuallyPrice:datas.actualTotal,
            shippingPrice:datas.transfee,
            num:datas.orderItemDtos[0].prodCount,
            imgUrl:datas.orderItemDtos[0].pic,
            shopName:datas.shopName,
            orderNumber:orderNumberS.value,
            adress:`${datas.userAddrDto.province}${datas.userAddrDto.city}${datas.userAddrDto.area}${datas.userAddrDto.addr}-${datas.userAddrDto.mobile}`
            }
}
onLoad((option) => {
  navText.value = option.state;
  console.log(navText.value);
});


let checkData = ref({})
let  checkWL = async() => {
  popup.value.open()
  let res = await check({orderNumber:orderNumberS.value})
  checkData.value = res.data
}
</script>

<style lang="scss" scoped>
.bottom_content_s{
  .right_button{
  position: relative
  ;
    display: flex;
    align-items: center;
  }
  .view_flex{
    display: flex;
    align-items: center;
    font-family: Microsoft YaHei;
font-weight: 400;
font-size: 20rpx;
color: #494949;
  }
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
 
}
.bottom_buttom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.message_table_top{
  .flex_top{
    display: flex;
    align-items: baseline !important;;
  }
  .modify{
    

    text-align: end;
    width: 61%;
    color: #000000!important;
  }
  .bottom_border{
  
  border-bottom: 1rpx solid #eee;
  width: 100%;
  // background: #eee;
}
  .table_item{
    margin-bottom: 15rpx;
  }
  
  .title{
    font-family: Microsoft YaHei;
font-weight: 400;

font-size: 20rpx;
color: #000000;

  }

  .values{
    font-family: Microsoft YaHei;
font-weight: 400;
font-size: 20rpx;
color: #FF1C23;

  }
  .big{
    font-size: 30rpx;
  }
  .table_item{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  padding: 20rpx;
  padding-top:0 ;
}
.bottom_border{
  
  border-bottom: 1rpx solid #eee;
  width: 100%;
  // background: #eee;
}

.content_shop_car{
  .SH{
    border-radius: 40rpx;
    border: 1px solid #818181
    ;
    font-size: 22rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #818181;
    display: flex;
    align-items: center;
    position: absolute;
    padding: 2px 8px;
    top: 80%;
    transform: translateY(-50%);
    right: 20rpx
  }
  .state{
    font-size: 22rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FF1C23;
    display: flex;
    align-items: center;
    position: absolute;
    top: 20rpx;
    right: 20rpx
  }
  position: relative;
  margin: 20rpx;
  padding: 15rpx;
  border-radius: 15rpx;
  background: white;
  .header_title{
    padding-bottom: 15rpx;
    border-bottom: 1px solid #eee;
     display: flex;
     align-items: center;
  }
  .gou{
    display: flex;
    align-items: center;

    justify-content: 
    center;
    width: 29rpx;
    height: 29rpx;
    border-radius: 50%;
  
    background: #FF1C23;
  }
  .no_gou{
    width: 29rpx;
    height: 29rpx;
    border-radius: 50%;
    border: 1px solid #ccc;
  }
}

.list_goods{
padding: 20rpx;
	.prive_title{
		margin-top: 8rpx;
		padding: 0 15rpx;
	}
	.shopmall{
		display: flex;
  color: #8D8D8D;
  font-size: 22rpx;
  margin-bottom: 20rpx;
  padding: 0 15rpx;
	}
	.margin_top_bottom{
		padding: 0 15rpx;
		margin-bottom: 8rpx;
		margin-top: 6rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.box1{
			margin-right: 20rpx;
			border: 1px solid #FF1C23;
			width: 85rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #DF0024;
			font-size: 18rpx;
		}
.box2{
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
	  .quan{
		padding: 1rpx;
		border: 1px solid #FF1C23;
		border-right: 1px dashed #FF1C23;
		color: #DF0024;
		font-size: 18rpx;
	  }
	  .quan2{
		padding: 1rpx;
		border: 1px solid #FF1C23;
		border-left: none;
		color: #DF0024;
		font-size: 18rpx;
	  }

	

	}
	.price_red{
		color: #FF1C23;
		font-size: 31rpx;
	}
	.price_scale{
		margin-left: 20rpx;
		color:#8D8D8D;
		font-size:22rpx;
	}
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	.item{
		margin-bottom: 20rpx;
		width: 49%;
     border-radius: 15rpx;
	 background: white;
	 .item_title{
		font-size: 25rpx;
		padding: 0 15rpx;
		margin-top: 15rpx;
		
		align-items: center;
	}
	.span_p{
		overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 控制多行的行数
    -webkit-box-orient: vertical;


	}
	.nianhuo{
		display: inline-block;;
		border-radius: 10rpx;
		vertical-align: top;
		font-size: 20rpx;
		background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
		width: 54rpx;
		height: 28rpx;
		text-align: center;
		color: white;
		font-weight: bolder;
		line-height: 28rpx;
       display: inline-block;
	}
	}
	
}
.price_box_shope{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .price{
    color: #FF1C23;
    font-size: 30rpx;
  }

  .minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	.input {
		padding: 0 10px;
	}
	.plus {
		width: 22px;
		height: 22px;
		background-color: #fa7a7e;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
}

.message_content_s{
  margin: 20rpx;
 margin-top: -210rpx;
  background: white;
  border-radius: 10rpx;
 
}
.background_color_marf{
  .sy{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Microsoft YaHei;
font-weight: 400;
font-size: 24rpx;
color: #FEFFFE;
  }
  .flex_Text{
    margin-bottom: 10rpx;
    font-family: PingFangSC;
font-weight: 600;
font-size: 36rpx;
color: #FEFFFE;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  height: 378rpx;
  background: #FE3B30;
  display: flex;
  align-items: center;
  flex-direction:column;
  padding: 60rpx;
}
.goodsListDetail{
  min-height: 94vh;
  background: #F8F8F8;
}

::v-deep .uv-count-down__text{
 color: white !important;;
 font-size: 24rpx !important;
}



.tag_shop{
  margin: 15rpx 0;
  border-radius: 50rpx;
  display: inline-block;
  color: #818181;
  font-size: 20rpx;
  padding: 7rpx 15rpx;
  background: #eee;
 
}
.font_shop{
  overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;//文字上限行
		-webkit-box-orient: vertical;

  font-size: 24rpx;
}
.content_box{
  width: 100%;
  margin-left: 20rpx;
}

.list_shop{
  background: white;
  padding: 20rpx 0;
display: flex;
align-items: center;
}

.list_my_list{
  // margin: 20rpx;
}
.myBuyList{
  min-height: 100vh;
  background-color: #F5F6F8;
}
.nav{
  background: white;
  padding: 0 20rpx;
}
.input_my_list {
  background: white;
  padding: 20rpx;
}

</style>